<template>
    <div>
        <div class="header-title">
            <span @click="goBack" class="mint-toast-icon mintui mintui-back"></span>
            <span>扫描二维码</span>
            <span></span>
        </div>
        <div class="scan">
            <div id="bcid">
                <div style="height:40%"></div>
                <p class="tip">...载入中...</p>
            </div>
            <!-- 验证弹出层 -->
            <mt-popup
                :closeOnClickModal="false"
                class="verify"
                v-model="popupVisible"
                position="center"
            >
                <p class="copyAddress">{{codeUrl}}</p>
                <input id="copyAddress" type="text" :value="codeUrl" />
                <mt-button
                data-clipboard-target="#copyAddress"
                    @click.native="copyAdr"
                    class="charge-btn"
                    size="normal"
                    type="primary"
                >点击复制</mt-button>
            </mt-popup>
        </div>
    </div>
</template>


<script>
import { Toast } from "mint-ui";
let scan = null;
export default {
    data() {
        return {
            popupVisible:false,
            codeUrl: "",
        };
    },
    created() {},
    mounted() {
        this.startRecognize();
        this.startScan();
    },
    methods: {
        //返回
        goBack() {
            this.closeScan();
            this.$router.go(-1);
        },

        //复制文字
        copyAdr() {
            let clipboard = new this.clipboard(".charge-btn");
            clipboard.on("success", function() {
                Toast({
                    message: "复制成功！",
                    duration: 1000,
                });
            });
            clipboard.on("error", function() {
                
            });
           this.$router.go(-1);
        },
        //创建扫描控件
        startRecognize() {
            let that = this;
            if (!window.plus) return;
            scan = new plus.barcode.Barcode("bcid");
            scan.onmarked = onmarked;
            function onmarked(type, result, file) {
                switch (type) {
                    case plus.barcode.QR:
                        type = "QR";
                        break;
                    case plus.barcode.EAN13:
                        type = "EAN13";
                        break;
                    case plus.barcode.EAN8:
                        type = "EAN8";
                        break;
                    default:
                        type = "其它" + type;
                        break;
                }
                result = result.replace(/\n/g, "");
                that.codeUrl = result;
                that.popupVisible = true;
                that.closeScan();
            }
        },
        //开始扫描
        startScan() {
            if (!window.plus) return;
            scan.start();
        },
        //关闭扫描
        cancelScan() {
            if (!window.plus) return;
            scan.cancel();
        },
        //关闭条码识别控件
        closeScan() {
            if (!window.plus) return;
            scan.close();
        }
    }
};
</script>
<style lang="less" scoped>
.header-title{
    z-index: 3000;
}
.scan {
    height: 100%;
    z-index: 2500;
    #bcid {
        width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        top: 45px;
        bottom: 0;
        text-align: center;
        color: #fff;
        background:#333;
        z-index: 1;
        font-size: 20px;
    }
}
//弹出层验证
.verify {
    width: 90%;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    padding: 20px;
    box-sizing: border-box;

    img {
        width: 16%;
        display: block;
        margin: 0 auto;
    }
    p {
        text-align: center;
        font-size: 14px;
        color: @blackColor8;
        margin: 10px 0;
        line-height: 26px;
    }
    .charge-btn {
        width: 100%;
        font-size: 16px;
        background-color:@blueColor10;
        margin-bottom: 20px;
    }
}
</style>